<template>
  <div class="index">
    <IndexHeader :city="city"></IndexHeader>
    <IndexSwiper :list="foodTypeList"></IndexSwiper>
    <IndexAd :ad="ad"></IndexAd>
    <IndexSeller :seller="seller"></IndexSeller>
    <Footer></Footer>
  </div>
</template>

<script>
import IndexHeader from './components/IndexHeader.vue'
import IndexSwiper from './components/IndexSwiper.vue'
import IndexAd from './components/IndexAd.vue'
import IndexSeller from './components/IndexSeller.vue'
import Footer from '@/pages/common/Footer.vue'
export default {
  name: 'Index',
  data () {
    return {
      city: '',
      foodTypeList: [],
      ad: [],
      seller: []
    }
  },
  components: {
    IndexHeader,
    IndexSwiper,
    IndexAd,
    IndexSeller,
    Footer
  },
  methods: {
    getData () {
      this.$axios.get('/api/index.json').then((response) => {
        const data = response.data
        if (data.ret && data.data) {
          const info = data.data
          this.city = info.city
          this.foodTypeList = info.foodTypeList
          this.ad = info.ad
          this.seller = info.seller
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
  .index {
    background-color: #cacaca3b;
  }
</style>
